<template>
	<view>
		<image @click="back" class="back" src="../static/home.png">
		</image>
		<scroll-view scroll-y="true" class="container" :scroll-top="scrollTop">
			<ul ref="lyricUL" style="padding: 0;">
				<li :class="{each:true, choose: (i==lyricIndex)}" v-for="(item, i) in currentMUsicLyric" :key="item.uid"
					:data-index='i' ref="lyric">
					{{item.lyric}}
				</li>
			</ul>
		</scroll-view>
		<view class="btns">
			<image @click="nextOrPrev(1)" class="pause" src="../static/change-prev.png"></image>
			<image v-if="is_play" @click="pauseMusic(true)" class="pause" src="../static/pause.png"></image>
			<image v-else @click="pauseMusic(false)" class="pause" src="../static/play.png"></image>
			<image @click="nextOrPrev(2)" class="pause" src="../static/change-next.png"></image>
		</view>
	</view>
</template>

<script>
	export default {
		name: "song-detail",
		props: {
			lyric: {
				type: String,
				default: () => {
					return '';
				}
			},
			currentTime: {
				type: Number,
				default: () => {
					return 0;
				}
			},
			isChange: {
				type: Boolean,
				default: () => {
					return false
				}
			}
		},
		data() {
			return {
				currentMUsicLyric: [],
				value: 0,
				lyricIndex: 0,
				isShowMusicList: false,
				is_play: true,
				scrollTop: '',
				num_scrollTop: 0
			};
		},
		watch: {
			lyric: {
				deep: true,
				handler(newval, old) {
					this.$nextTick(() => {
						this.formatLyric(newval);
						this.$forceUpdate();
					});
				}
			},
			currentTime: {
				deep: true,
				handler(newval, old) {
					this.$nextTick(() => {
						this.updateLyric(newval);
						this.$forceUpdate();
					});
				}
			},
			isChange: {
				deep: true,
				handler(newval, old) {
					this.$nextTick(() => {
						if (newval != old) this.currentMUsicLyric = [];
						this.$forceUpdate();
					});
				}
			},
			currentMUsicLyric: {
				deep: true,
				handler(newval, old) {
					this.$nextTick(() => {
						this.$forceUpdate();
					});
				}
			}
		},
		created() {},
		methods: {
			back() {
				this.$emit('songBack', false);
			},
			pauseMusic(e) {
				this.is_play = !this.is_play;
				this.$emit('pauseMusic', e);
			},
			nextOrPrev(n) {
				if (n == 2) this.$emit('nextOrPrev', 2);
				else this.$emit('nextOrPrev', 1);
			},
			formatLyric(lyric) {
				const regNewLine = /\n/;
				const lineArr = this.lyric.split(regNewLine); // 每行歌词的数组
				const regTime = /\[\d{2}:\d{2}.\d{2,3}\]/; //这里用正则来匹配中括号里面的时间
				lineArr.forEach(item => {
					if (item === '') return;
					const obj = {};
					const time = item.match(regTime);

					obj.lyric = item.split(']')[1].trim() === '' ? '' : item.split(']')[1].trim();
					obj.time = time ? this.formatLyricTime(time[0].slice(1, time[0].length - 1)) : 0;
					obj.uid = Math.random().toString().slice(-6);
					if (obj.lyric === '') {
						console.log('这一行没有歌词');
					} else {
						this.currentMUsicLyric.push(obj);
					}
				});
			},
			formatLyricTime(time) { // 格式化歌词的时间 转换成 sss:ms
				const regMin = /.*:/
				const regSec = /:.*\./
				const regMs = /\./

				const min = parseInt(time.match(regMin)[0].slice(0, 2))
				let sec = parseInt(time.match(regSec)[0].slice(1, 3))
				const ms = time.slice(time.match(regMs).index + 1, time.match(regMs).index + 3)
				if (min !== 0) {
					sec += min * 60
				}
				return Number(sec + '.' + ms)
			},
			updateLyric(currentTime) {
				for (let i = 0; i < this.currentMUsicLyric.length; i++) {
					if (currentTime > (parseInt(this.currentMUsicLyric[i].time))) {
						const index = this.$refs.lyric[i].dataset.index
						if (i === parseInt(index)) {
							this.lyricIndex = i
							this.$refs.lyricUL.style.transform = `translateY(${140 - (30 * (i + 1))}px)`;
							// this.num_scrollTop += 100;
							// this.scrollTop = this.num_scrollTop + 'rpx';
							// console.log(this.scrollTop);
						}
					}
				}
			}
		}
	}
</script>

<style>
	page {
		background-color: rgba(51, 51, 51, 1);
	}
</style>
<style lang="scss">
	.container {
		height: 100vh;
		background-color: #333;
		padding-bottom: 200rpx;
	}

	.back {
		position: fixed;
		top: 100rpx;
		left: 20rpx;
		width: 80rpx;
		height: 80rpx;
		z-index: 99999;
	}

	.btns {
		display: flex;
		width: 90%;
		height: 100rpx;
		position: fixed;
		bottom: 100rpx;
		left: 50%;
		transform: translateX(-50%);
		background-color: rgba(255, 255, 255, 1);
		border-radius: 20rpx;
	}

	.pause {
		margin: auto;
		width: 80rpx;
		height: 80rpx;
	}

	.lyric {
		width: 400px;
		height: 300px;
		position: absolute;
		top: -312px;
		left: 774px;
		// 滚动条
		overflow: auto;
		color: #ddd;
		font-size: 10px;
		font-weight: normal;
		padding: 5px 10px;
		border: 1px solid #000;
		border-left: none;
		z-index: 9999;

		// 修改滚动条样式
		&::-webkit-scrollbar {
			width: 3px;
			height: 1px;
		}

		// 滑块部分
		&::-webkit-scrollbar-thumb {
			background-color: #eee;
		}

		// 轨道部分
		&::-webkit-scrollbar-track {
			background-color: #333;
		}
	}

	.each {
		list-style: none;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		color: #ddd;
		font-size: 30rpx;
	}

	.choose {
		height: 100rpx;
		line-height: 100rpx;
		font-size: 40rpx;
		font-weight: 600;
	}
</style>
